import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Card, Form, Input, Button } from 'antd';
import classNames from 'classnames';
import { useAntdTable } from '@umijs/hooks';
import { getPageSizeByCardHeight } from '@/utils/utils';

import ScrollBar from '@/components/ScrollBar';
import SlickTable from '@/components/SlickTable';

import request from '@/utils/request';
import styles from './index.less';

function Menu({ size: { height } }) {
  // sizePage 计算满屏的pageSize
  const [sizePage, setSizePage] = useState(getPageSizeByCardHeight(height));
  // 查询条件表单集合
  const [paramsObj, setParamsObj] = useState({
    queryType: 'handle',
  });
  // flow fix-label
  // 当窗口高度变化将重置pageSize
  useEffect(() => {
    setSizePage(getPageSizeByCardHeight(height));
  }, [height]);

  const getTable = ({ current, pageSize, paramsObj }) => {
    return request('pmc/pms/PmOrderWorkController/queryPage', {
      data: {
        pageNum: current,
        pageSize,
        ...paramsObj,
      },
    }).then(res => {
      if (Array.isArray(res.data.records)) {
        return {
          total: res.data.total,
          data: res.data.records.map(val => {
            const { children, ...rest } = val;
            return rest;
          }),
        };
      }
      return {
        total: 0,
        data: [],
      };
    });
  };

  // refresh 为useAntable 内置的刷新表格方法
  const { tableProps, refresh } = useAntdTable(
    params => {
      return getTable({ ...params, pageSize: sizePage, paramsObj });
    },
    [paramsObj, sizePage],
    {
      defaultPageSize: sizePage,
    }
  );

  const { pagination, ...restTableProps } = tableProps;

  return (
    <div className={styles.scroll_main}>
      <div className={styles.scroll_left}>
        <Card className="cute" title="查询条件" style={{ height }}>
          <div className={styles.scroll_external}>
            <ScrollBar autoHide autoHeight autoHeightMax={height - 64}>
              <Form className={classNames(styles.scroll_interior, 'flow fix-label')}>
                <Form.Item label="客户编码">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="受理开始时间">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field C">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field D">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field E">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field F">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field G">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field H">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Field I">
                  <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item className="text-right padding-top">
                  <Button type="primary">查询</Button>
                </Form.Item>
              </Form>
            </ScrollBar>
          </div>
        </Card>
      </div>
      <div className={styles.scroll_content}>
        <Card
          className="cute"
          title="表格"
          style={{ height }}
          extra={<a onClick={() => {}}>+ 新建故障单</a>}
        >
          <SlickTable
            rowKey={record => record.mainId}
            columns={[
              {
                title: '流程实例标识',
                dataIndex: 'flowInstId',
                ellipsis: true,
              },
              {
                title: '工单名称',
                dataIndex: 'orderName',
                ellipsis: true,
              },
              {
                title: '工单编码',
                dataIndex: 'orderNumber',
                width: 160,
                ellipsis: true,
              },
              {
                title: '流程名称',
                dataIndex: 'flowName',
                ellipsis: true,
              },
              {
                title: '流程类型',
                dataIndex: 'flowDefName',
                ellipsis: true,
              },
              {
                title: '发起时间',
                dataIndex: 'createDateStr',
                width: 150,
                align: 'center',
              },
              {
                title: '发起人',
                dataIndex: 'createName',
                width: 100,
                align: 'center',
              },
              {
                title: '当前环节',
                dataIndex: 'flowNodeName',
                ellipsis: true,
              },
              {
                title: '当前处理人',
                dataIndex: 'dealName',
                width: 100,
                align: 'center',
              },
            ]}
            {...restTableProps}
            data={{
              pagination: {
                ...pagination,
                pageSize: sizePage,
              },
            }}
          />
        </Card>
      </div>
    </div>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Menu);
